
<template>
  <el-container>
    <el-header class="fater-header">
      <el-row>
        <!--        左上角logo设计-->
        <el-col :span="6">
          <div class="fater-header-logo">
            <el-row >
              <el-col :span="4">
                <img
                  src="@/assets/zuoshangjiao.png"
                  style="
                            width: 35px;
                            height: 35px;
                            margin: 17px 5px 0 0px;
                            -webkit-user-drag: none;
                            -khtml-user-drag: none;
                            -moz-user-drag: none;
                            user-drag: none;
                        "
                />
              </el-col>
              <el-col :span="20" style="font-size: 26px;margin-left: -15px" >
                测井曲线重构系统
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col :span="12">
          <el-dropdown  class="fater-header-user" @command="handleUser">
            <!--          头像设置-->
            <span class="el-dropdown-link">
                <el-row>
                    <el-col :span="7">
                        <el-avatar
                          shape="square"
                          :size="55"
                          :src="require('@/assets/avatar.jpg')"
                          style="
                                margin: 5px 10px 0 0;
                                border: 1px solid lightgrey;
                            "
                        ></el-avatar>
                    </el-col>
                  <!--                  用户名-->
                    <el-col :span="17" style="font-size: 24px; font-weight: 600;text-align: right;">{{username}}</el-col>
                </el-row>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="info">修改信息</el-dropdown-item>
              <el-dropdown-item command="pwd">修改密码</el-dropdown-item>
              <el-dropdown-item command="exit">退出系统</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>

        <!--        修改密码模态框-->
        <el-col :span="6">
          <el-dialog
            title="修改密码"
            width="600px"
            :append-to-body="true"
            :visible.sync="showUpdPwdFlag"
            :close-on-click-modal="false"
          >
            <el-form
              label-width="80px"
              ref="userPwdForm"
              :model="userPwd"
              :rules="userPwdFormRules"
              show-password
            >
              <el-form-item label="原始密码" prop="oldPwd">
                <el-input
                  type="password"
                  v-model="userPwd.oldPwd"
                  placeholder="请输入原始密码……"
                  autocomplete="off"
                  show-password
                >
                </el-input>
              </el-form-item>
              <el-form-item label="修改密码" prop="newPwd">
                <el-input
                  type="password"
                  v-model="userPwd.newPwd"
                  placeholder="请输入修改密码……"
                  autocomplete="off"
                  show-password
                >
                </el-input>
              </el-form-item>
              <el-form-item label="确认密码" prop="rePwd">
                <el-input
                  type="password"
                  v-model="userPwd.rePwd"
                  placeholder="请再次确认密码……"
                  autocomplete="off"
                  show-password
                >
                </el-input>
              </el-form-item>
              <el-form-item>
                <el-button @click="closeUpdataPwd('userPwdForm')"
                           style="font-size: 18px">  取 消</el-button>
                <el-button type="primary" @click="updatePwd('userPwdForm')"
                           style="font-size: 18px" plain
                >  确 定</el-button>
              </el-form-item>
            </el-form>

          </el-dialog></el-col>

        <!--        修改信息模态框-->
        <el-col :span="6">
          <el-dialog
            title="修改信息"
            width="700px"
            :append-to-body="true"
            :visible.sync="showUpdInfoFlag"
            :close-on-click-modal="false"
          >
            <el-form label-width="80px" :model="userForm" :rules="reviseRules" ref="userForm">
              <el-row :gutter="15">
                <el-col :span="12">
                  <el-form-item label="用户账号" prop="userName">
                    <el-input
                      v-model="userForm.userName"
                      placeholder="请输入用户账号…"
                      autocomplete="off"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="联系电话" prop="phone">
                    <el-input
                      v-model="userForm.phone"
                      placeholder="请输入联系电话…"
                      autocomplete="off"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="15">
                <el-col :span="12">
                  <el-form-item label="用户姓名" prop="name">
                    <el-input
                      v-model="userForm.name"
                      placeholder="请输入用户姓名…"
                      autocomplete="off"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="用户年龄" prop="age">
                    <el-input
                      v-model="userForm.age"
                      placeholder="请输入用户年龄…"
                      autocomplete="off"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="15">
                <el-col :span="24">
                  <el-form-item label="用户性别" prop="gender">
                    <el-radio-group v-model="userForm.gender">
                      <el-radio label="男"></el-radio>
                      <el-radio label="女"></el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-form-item label="联系地址" prop="address">
                <el-input
                  rows="4"
                  type="textarea"
                  v-model="userForm.address"
                  placeholder="请输入联系地址…"
                  autocomplete="off"
                ></el-input>
              </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="showUpdInfoFlag = false" style="font-size: 18px"> 取 消</el-button>
              <el-button type="primary" @click="updInfo('userForm')" style="font-size: 18px" plain> 确 定</el-button>
            </div>
          </el-dialog>
        </el-col>
      </el-row>

    </el-header>

    <!--    侧边菜单栏-->
    <el-container>
      <el-aside  width="13vw" class="el-aside">
        <el-menu active-text-color="#6495ED" default-active="/home"
                 router>
          <el-menu-item   :index="home" >
            <i  style="font-size: 26px;" class="el-icon-s-home"></i>
            <span slot="title" style="color: #8C99A4;" >首页</span>
          </el-menu-item>
          <el-menu-item   :index="user" >
            <i  style="font-size: 26px;" class="el-icon-user"></i>
            <span slot="title" style="color: #8C99A4;" >用户信息</span>
          </el-menu-item>
          <el-menu-item   :index="predict" >
            <i  style="font-size: 26px;"></i>
            <span slot="title" style="color: #8C99A4;">预测</span>
          </el-menu-item>
          <el-menu-item   :index="history">
            <i  style="font-size: 26px;"></i>
            <span slot="title" style="color: #8C99A4;">历史记录</span>
          </el-menu-item>
        </el-menu>
      </el-aside>

      <el-main height="92vh">
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>


import history from "./History.vue";
import predict from "./Predict.vue";
import home from "./Home.vue";
import user from "./User.vue";

export default {
  name: "index",
  computed: {
    user() {
      return user
    },
    home() {
      return home
    },
    predict() {
      return predict
    },
    history() {
      return history
    },
    login() {
      return login
    }
  },
  data() {
    const _self = this
    // 原始密码规则
    var checkOldPwd = (rule, value, callback) => {
      if (value === '' || typeof value === 'undefined') {
        callback(new Error('请输入原始密码！'))
      } else {
        _self.$http.post("/api/checkPwd",
          {oldPwd: _self.userPwd.oldPwd}).then(resp => {
          if (resp.data.code == 200) {
            callback()
          } else {
            callback(new Error('密码错误！'));
          }
        })
      }

    };
    // 新密码规则
    var checkNewPwd = (rule, value, callback) => {
      if (value === '' || typeof value === 'undefined') {
        callback(new Error('请输入密码！'))
      }
      if (!/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{4,8}$/.test(value)) {
        // 没满足规则时输出错误内容
        callback(new Error('密码由数字和字母组成，4-8位'));
      }
      else callback()
    };
    // 确认密码规则
    var checkRePwd = (rule, value, callback) => {
      if (value === '' || typeof value === 'undefined') {
        callback(new Error("请输入确认密码"));
      } else {
        if (value != this.userPwd.newPwd) {
          callback(new Error("两次输入密码不一致"));
        }
      }
      callback();
    };
    // 用户名规则
    var checkUserName= (rule, value, callback) => {
      if(value ==_self.username) callback()
      _self.$http.post("/api/checkUserName",
        {userName: _self.userForm.userName}).then(resp => {
        if (resp.data.code == 200) {
          callback()
        } else {
          callback(new Error('用户名重复！'));
        }
      })
    };
    // 年龄规则
    var checkAge = (rule, value, callback) => {
      //规则
      if (!/^[0-9]/.test(value)) {
        // 没满足规则时输出错误内容
        callback(new Error('只能输入数字'));
      }
      else callback()
    };
    // 电话规则
    var checkPhone = (rule, value, callback) => {
      //规则
      if (!/^[0-9]{11}$/.test(value)) {
        // 没满足规则时输出错误内容
        callback(new Error('请输入11位的数字'));
      }
      else callback()
    };
    return {
      //打开修改密码模态框
      showUpdPwdFlag: false,
      //打开修改信息模态框
      showUpdInfoFlag: false,
      username: "",
      // 菜单绑定属性
      nodes: [],
      //修改密码表单绑定属性
      userPwd: {
        oldPwd: "",
        newPwd: "",
        rePwd: "",
      },
      //修改密码规则
      userPwdFormRules: {
        oldPwd: [
          {
            validator: checkOldPwd,
            trigger: "blur",
          },
        ],
        newPwd: [
          {
            validator: checkNewPwd,
            trigger: "blur",
          },
        ],
        rePwd: [
          {
            validator: checkRePwd,
            trigger: "blur",
          },
        ],
      },
      //修改信息模态框内容
      userForm: {
        userName: "",
        name: "",
        gender: "",
        age: "",
        phone: "",
        address: "",
      },
      //修改信息规则
      reviseRules:{
        //命名必须与输入框绑定的属性名称一样
        userName:[
          { required: true, message: '请输入用户名', trigger: 'blur' },
          {
            validator: checkUserName,
            trigger: "blur",
          },
        ],
        name:[
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        gender:[
          { required: true, message: '请选择性别', trigger: 'blur' }
        ],
        age:[
          { required: true, message: '请输入年龄', trigger: 'blur' },
          {
            validator: checkAge,
            trigger: "blur",
          }
        ],
        phone:[
          { required: true, message: '请输入电话', trigger: 'blur' },
          {
            validator: checkPhone,
            trigger: "blur",
          }
        ],
        address:[
          { required: true, message: '请输入地址', trigger: 'blur' }
        ],
      }
    }
  },
  methods: {
    //查询菜单信息
    queryPermissions() {
      //查询角色信息
      const _self = this
      _self.$http.get("/api/permisssion/" + _self.username)
        .then(function (resp) {
          _self.nodes = resp.data.data
        })
    },
    //下拉框三个功能处理
    handleUser(comm) {
      // 修改信息
      if (comm == "info") {
        this.showUpdInfoFlag=true;
        //回显信息
        this.queryUserInfo();
      }
      // 修改密码
      if (comm == "pwd") {
        this.showUpdPwdFlag = true;
      }

      //退出功能
      if (comm == "exit") {
        this.$confirm("确认要退出吗？", "系统提示", {
          confirmButtonText: "确认",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          const _self = this
          _self.$http.get("/api/logout").then(function (resp) {
            sessionStorage.clear()
            _self.$router.replace("/login")
            _self.$router.go(0)
          })
        });
      }
    },
    //修改密码确定按钮绑定方法
    updatePwd(userPwdForm) {
      const _self = this
      this.$confirm('确认修改？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        _self.$refs[userPwdForm].validate((valid) => {
          if (valid) {
            //表单验证通过就发送请求
            _self.$http.put("/api/pwd", _self.userPwd).then(resp => {
              if (resp.data.code == 200) {
                //将表单清空
                _self.$refs[userPwdForm].resetFields();
                _self.$message.success(resp.data.msg)
                //退出
                _self.$http.get("/api/logout").then(function (resp) {
                  sessionStorage.clear()
                  _self.$router.replace("/login")
                  _self.$router.go(0)
                })
              }
            })
          } else {
            _self.$message.warning("请按照提示进行修改")
            return false;
          }
        })
      }).catch(() => {
        this.showUpdPwdFlag=false
      })
    },
    //修改信息回显模态框
    queryUserInfo(){
      const _self = this
      _self.$http.get("/api/userInfo/"+_self.username).then(function (resp){
        console.log(resp.data.data)
        _self.userForm=resp.data.data
      })
    },
    //提交用户修改信息
    updInfo(userForm) {
      const _self=this
      this.$confirm('确认修改？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        _self.$refs[userForm].validate((valid) => {
          //表单验证通过
          if(valid){
            //处理修改了用户名 要更新成新的用户名 否则无法查询到
            sessionStorage.setItem("username",_self.userForm.userName)
            _self.username=sessionStorage.getItem("username")
            _self.$http.put("/api/updUserInfo",_self.userForm).then(function (resp){
              _self.showUpdInfoFlag=false
              //刷新界面展示新的个人资料
              _self.$router.go(0)
            }).catch(() => {
              this.showUpdInfoFlag=false
            })
          }
          else{
            _self.$message.warning("请按照提示进行修改")
            return false;
          }
          if(valid) _self.$message.success("修改成功")
        })
      })
    },
    //修改密码取消按钮绑定方法
    closeUpdataPwd(userPwdForm){
      //将表单清空
      this.$refs[userPwdForm].resetFields();
      this.showUpdPwdFlag=false
    }

  },
  //钩子函数（简单理解为页面渲染完毕就执行）
  // mounted() {
  //   this.username = sessionStorage.getItem("username")
  //   //查询登录账号对应的菜单信息
  //   this.queryPermissions()
  // }
}
</script>

<style scoped>
.el-aside {
  background-color: #fff;
  color: #8C99A4;
  text-align: center;
  line-height: 200px;
  /*height: 752px;*/
  height: 100vh;
  font-weight:bold;
}
.fater-header {
//position: fixed;
  left: 0px;
  right: 0;
  top: 0;
  height: 70px !important;
  line-height: 70px;
  background-color: #6495ed;
  cursor: pointer;
  border-bottom: 1px solid #eee;
}
.fater-header-logo {
//position: absolute;
  left: 25px;
  font-size: 20px;
  font-weight: bold;
  color: #fff;
}
.fater-header-user{
  position: absolute;
  right: 35px;
  color: #fff;
}
.el-main {
  background-color: #F7F7F7;
  color: #333;
  text-align: center;
  line-height: 160px;
}
body > .el-container {
  /*margin-bottom: 40px;*/
  width: 100vw;
  height: 100vh;
}
.userName{
  /*position: absolute;*/
  float: right;
  margin-right: -105px;
  top:2px;
  width: 64px;
  height: 65px;
  text-align: left;
}
#userImage{
  position: absolute;
  /*float: right;*/
  right: 10px;
  top:-5px;
}
.el-menu-demo{
  display: inline-block;
  background-color: #EDEDED;
  text-align: left;
}
.myMenuItem {
  /*height: 56px;*/
  /*line-height: 56px;*/
  /*list-style: none;*/
  text-align: left;
}
.el-menu-item .is-active i {
  color: #6495ED;
}
.fater-left{
//position: fixed;
  top: 70px;
  left: 0;
  bottom: 0;
  width: 200px !important;
  border-right:  1px solid #eee;
  background-color: #fff;
}
.fater-left .el-menu{

  border-right:  none;
}
.fater-left .fa{
  margin-right: 10px;
}
</style>
